<template>
    <div class="qa-item" :class="{ right: isOwner }">
        <div class="bubble">
            <!-- 提问：纯文本 -->
            <p v-if="isOwner" class="text">{{ text }}</p>

            <!-- 回答：逐字打字 + HTML -->
            <div v-else class="html-content" v-html="text" />
        </div>
    </div>
</template>

<script setup lang="ts">
// import { useTypeWriter } from './useTypeWriter';

interface Props {
    text: string; // 纯文本（提问）或 HTML 字符串（回答）
    isOwner: boolean;
    // time?: string;
}
const props = withDefaults(defineProps<Props>(), {
    // time: () => new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
});

// 只有回答需要打字
// const typing = useTypeWriter(() => (props.isOwner ? '' : props.text));
</script>

<style scoped>
.html-content {
    /* 让内部 HTML 样式保持原样 */
    line-height: 1.6;
}
.qa-item {
    display: flex;
    margin: 0;
}
.qa-item.right {
    justify-content: flex-end;
}

.bubble {
    max-width: 91%;
    padding: 10px 12px;
    border-radius: 10px;
    word-break: break-all;
}

.qa-item.right .bubble {
    background: #5d5d5d;
    color: #fff;
}
.qa-item:not(.right) .bubble {
    color: #fff;
    background-color: #ffffff1a;
    backdrop-filter: blur(68px);
}
</style>
